<template>
  <div class="wrapper">
    <div class="icon">
      <span class="iconfont">&#xe600;</span>
      <div class="icon-desc">附近小吃</div>

    </div>
     <div class="icon">
      <span class="iconfont">&#xe63f;</span>
      <div class="icon-desc">校园景色</div>

    </div>
     <div class="icon">
      <span class="iconfont">&#xe67a;</span>
      <div class="icon-desc">宿舍报修</div>

    </div>
     <div class="icon">
      <span class="iconfont">&#xe606;</span>
      <div class="icon-desc">快递服务</div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'homeCatalog'

}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  background:#DCE2F1
  .icon
    margin-top:10px
    width:25%
    float:left
    .iconfont
      font-size:50px
      background:#E3EDCD
      border-radius:.1rem
      margin:20px
    .icon-desc
      margin-top:10px
      text-align:center
      padding-bottom:.5rem

</style>
